import ResizeObserver from 'ant-design-vue/es/vc-resize-observer'
import * as echarts from 'echarts/core'

import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

import './chart.css'
import styleVariables from 'style-variables'

echarts.use([
  GridComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
])

export default echarts

export const colorPicker = [
  styleVariables.primary,
  styleVariables.success
]

export const legend = {
  icon: 'rect',
  itemWidth: 12,
  itemHeight: 2,
  textStyle: {
    color: styleVariables['text-color'],
    fontSize: 11
  }
}

export const tooltip = {
  trigger: 'axis',
  textStyle: {
    color: styleVariables['text-color'],
    fontSize: 11
  }
}

// eslint-disable-next-line no-unused-vars
export function createVNode({ h, className, useResize, resizeFn }) {
  const host = <div class={ ['pro-chart', className] }><div ref="host" class="pro-chart-host" /></div>

  return useResize
    ? <ResizeObserver onResize={ resizeFn }>{ host }</ResizeObserver>
    : host
}
